<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script>
var rideList;
var numberMap={};
$(document).ready(function(){
	$("input.rideDate").datepicker({
		"changeMonth":"true",
		"changeYear":"true",
		"showButtonPanel":"true",
		"dateFormat":"yy-mm-dd"
	});
	$("input.rideDate").css({
		"text-align":"center",
		"width":"180px",
		"height":"30px",
		"font-family":"myFont"
	});
	$("input.return").css("display","none");
	$("#rideDateBetween").css({
		"padding":"0 10px",
	});
	$("input.rideDate.start").attr("placeholder","검색 시작날짜");
	$("input.rideDate.start").attr("required","true");
	$("input.rideDate.end").attr("placeholder","검색 종료날짜");
	$("input.rideDate.end").attr("required","true");
	$("input.search.history").css({
		"height":"30px",
		"font-family":"myFont"
	});
	$("input.search.history").click(function(){
		$.getJSON("/kosta_project_final_taxi/getHistoryList.do","rideDate1="+$("input.rideDate.start").val()+"&rideDate2="+$("input.rideDate.end").val(), function(data){
			rideList = data.result;
			if(rideList.length != 0){
				$("table.ride.history").empty();
				$("table.ride.history").append(" <tr>  </tr> ");
				$("table.ride.history>tr:last").append("<th>번 호</th>");
				$("table.ride.history>tr:last").append("<th>탑승 날짜</th>");
				$("table.ride.history>tr:last").append("<th>평 가</th>");
				for(var i=rideList.length - 1; i >= 0;i--){
					numberMap[i] = rideList[i];
					$("table.ride.history").append("  <tr>  </tr> ");
					$("table.ride.history>tr:last").append("<td>"+i+"</td>");
					$("table.ride.history>tr:last>td:last").click(function(){
						$("input.return").css("display","block");
						$("table.ride.detail").css("display","block");
						$("table.ride.history").css("display","none");
						var mapKey =$(this).text();
						$("table.ride.detail").append("  <tr> <td>탑승 날짜</td> <td>"+numberMap[mapKey].rideDate.split(" ")[0]+"</td>"+"<td>평 가</td>"+"<td>" + numberMap[mapKey].rating +"</td> </tr>  ");						
						$("table.ride.detail").append("  <tr> <td colspan=\"4\">" + numberMap[mapKey].ratingComment + " </td> </tr> ");
						$("table.ride.detail").css({
							"margin":"30px auto",
							"font-family":"myFont",
							"text-align":"center",
							"width":"800px"
						});				
						$("input.return").css({
							"margin":"20px auto 0 auto",
							"height":"30px"
						});
						$("table.ride.detail tr").css({
							"width": $("table.ride.detail").width()
						});
						$("table.ride.detail td").css({
							"border": "2px solid white",
							"padding": "10px",
							"min-width": "200px"
						});
						$("input.return").click(function(){
							$("input.return").css("display","none");
							$("table.ride.detail").css("display","none");
							$("table.ride.detail").empty();
							$("table.ride.history").css("display","block");
							$("table.ride.history").css({
								"width":"600px",
								"font-family":"myFont",
								"text-align":"center",
								"margin-left":"auto",
								"margin-right":"auto"
							});
						});
					});
					
					$("table.ride.history>tr:last>td:last").on("mouseover",function(){
						$(this).css({
							"cursor":"pointer"
						});
					});
					for(z in rideList[i]){
						if(z == "rating"){
							$("table.ride.history>tr:last").append("<td>"+rideList[i][z]+"</td>");
							$("table.ride.history>tr:last>td:last").on("mouseover",function(){
								$("table.ride.history>tr:last>td:last").css({
									"cursor":"pointer"
								});
							});
						}else if(z == "rideDate"){
							$("table.ride.history>tr:last").append("<td>"+rideList[i][z].split(" ")[0]+"</td>");
						}
					}
				}
				
				$("table.ride.history").css({
					"font-family":"myFont",
					"text-align":"center",
					"margin-top":"30px",
					"width":"600px"
				});
				
				$("table.ride.history th").css({
					"padding":"10px"
				});
				
				$("table.ride.history td").css({
					"border": "2px solid white",
					"padding": "10px",
					"min-width":"200px"
				});	
			}else{
				$("div.history.empty").text("조회된 결과가 없습니다.");
				$("div.history.empty").css({
					"color":"red",
					"font-size":"14pt",
					"padding":"10px",
					"font-family":"myFont"
				});
			}
		});
	});
});
</script>
<div class="main">
	<h1>검색할 날짜를 선택해 주십시오.</h1>
	<div>
		<input type="text" class="rideDate start"/><span id="rideDateBetween">~</span><input type="text"class="rideDate end"/>
		<input class="search history" type="button" value="검색"/>
	</div>
	<div>
		<table class="ride history">
		</table>
		<div class="history empty">
		</div>
	</div>
	<div>
		<table class="ride detail">
		</table>
	</div>
	<input class="return" type="button" value="목록으로 돌아가기"/>
</div>